<script setup>
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import {get,post,del,getImage} from '../api/http'
import { ref } from 'vue';
import { loginStatus, userInfoCache, menuStore } from '../utils/store';
import { Back, Coin, Goods, Menu, Money } from '@element-plus/icons-vue';
import 'element-plus/theme-chalk/display.css'
import { ElMessage } from 'element-plus';

const props = defineProps(["id"])
const currentNote = ref({})
const text = ref('')
const blogCommentList = ref([])
const comment = ref({})
const showReCommentDialog = ref(false)
const currentReCommentData = ref({})
const reTempCommentContent = ref('')
const loading = ref(false)
const router = useRouter()
const showPay = ref(false)
const avatarData = ref(null)

const getNoteInfo = () => {
    get('note/byId',{id:props.id}).then(res=>{
        get('blog/count',{noteId:res.data.id})
        currentNote.value = res.data
    })
}

const getUserAvatar = () => {
    getImage('user/avatar').then(res=>{
        avatarData.value = window.URL.createObjectURL(res);
    })
}

const getBlogText = () => {
        loading.value = true
        get('note/text',{id: props.id}).then(res=>{
        if(res.status){
            text.value = res.data
            //加载博文的评论列表
            loadCommentList()
        }else{
            ElMessage({type:'error', message:res.msg})
        }
        loading.value = false
    })
}

const loadCommentList = () => {
    get('comment',{noteId:props.id}).then(res=>{
        blogCommentList.value = res.data
    })
}

const submitComment = () => {
    if(comment.value.content == null || comment.value.content.trim() == ''){
        ElMessage({type:'warning',message:'请输入有效评论进行评论'});
        return;
    }
    comment.value.isMain = true
    comment.value.noteId = currentNote.value.id
    post('comment', comment.value).then(res=>{
        ElMessage({type:res.status?'success':'error', message:res.msg})
        if(res.status){
            comment.value = {}
            loadCommentList()
        }
    })
}

const submitReComment = () => {
    comment.value.isMain = false
    comment.value.noteId = currentNote.value.id
    comment.value.content = reTempCommentContent.value
    comment.value.subUserId = currentReCommentData.value.mainUserId
    comment.value.mainCommentId = currentReCommentData.value.mainCommentId ? currentReCommentData.value.mainCommentId : currentReCommentData.value.id
    post('comment', comment.value).then(res=>{
        ElMessage({type:res.status?'success':'error', message:res.msg})
        if(res.status){
            comment.value = {}
            loadCommentList()
            showReCommentDialog.value = false
        }
    })
}

const reComment = (data) => {
    currentReCommentData.value = data
    showReCommentDialog.value = true
}

const backPage = () => {
    menuStore.show = true
    router.go(-1)
}

const delComment = (id) => {
    ElMessageBox.confirm('是否确认删除该条评论?','提示',{type:'warning'}).then(()=>{
        del('comment',{id:id}).then(res=>{
            ElMessage({type:res.status?'success':'error',message:res.msg})
            if(res.status){
                loadCommentList()
            }
        })
    })
}

const changeMenuShow = () => {
    menuStore.show = !menuStore.show
}

onMounted(()=>{
    getUserAvatar()
    getNoteInfo()
    getBlogText()
    loadCommentList()
    menuStore.show = false
})

</script>

<template>
    <main v-loading="loading" v-blog-title :data-title="currentNote.noteTitle" :data-describe="currentNote.noteDescribe">
        <el-backtop :right="60" :bottom="100" />
        <el-row justify="center">
          <el-col :lg="20" :md="20">
            <div>
                <!-- <el-affix offset="70"> -->
                    <div class="bar">
                        <div class="info">
                            「 {{currentNote.nickName}} 」{{ currentNote.noteTitle }}
                        </div>
                        <div class="hidden-xs-only">
                            <el-button @click="backPage" style="margin: 0px 10px; font-weight: bold;"  link :icon="Back">返回</el-button>
                            <el-button v-if="!menuStore.show" @click="changeMenuShow" style="margin: 0px 10px; font-weight: bold;"  link :icon="Menu">显示菜单</el-button>
                            <el-button v-if="menuStore.show" @click="changeMenuShow" style="margin: 0px 10px; font-weight: bold;"  link :icon="Menu">隐藏菜单</el-button>
                        </div>
                        
                    </div>
                <!-- </el-affix> -->
                <v-md-preview class="previewPage" :text="text"></v-md-preview>
                <div class="zanshang">
                    <el-tooltip content="你的支持是我坚持下去最大的动力 ^_^ ~~~">
                        <el-button @click="showPay=true" :icon="Coin" type="danger">赞赏</el-button>
                    </el-tooltip>
                </div>
                <div class="commentArea">
                    <div class="tips" v-if="!loginStatus">
                        登录后可以进行评论~<a href="/login">去登录</a>
                    </div>
                    <div class="chatBox" v-if="loginStatus">
                        <div class="ChatTitle">
                            <el-avatar :src="avatarData" :size="30"></el-avatar>
                            <div style="padding: 0 10px; font-weight:bold;">评论 ( {{ currentNote.commentCount }} )</div>
                        </div>
                        <el-input v-model="comment.content" type="textarea" placeholder="输入留言内容" resize="none" rows="5"></el-input>
                        <div style="text-align: right; padding: 10px 0;"><el-button @click="submitComment" style="width: 100px;" type="primary">发布</el-button></div>
                        
                    </div>
                    <div class="commentList">
                        <div style="text-align: center; color: gray;" v-if="blogCommentList.length === 0">暂无留言信息～</div>
                        <div class="commentItem" v-for="main in blogCommentList" :key="main.id">
                            <div>
                                <div class="mainChat">
                                    <el-avatar :src="'https://www.huhailong.vip/sso/user/avatarByUserId/'+main.mainUserId" :size="30"></el-avatar>
                                    <span style="padding-left: 10px; font-size: 14px;">{{ main.mainUsername }}:</span>
                                </div>
                                <pre style="padding-left:40px; font-size: 14px;">{{ main.content }}</pre>
                            </div>
                            <div style="font-size:14px; color:gray; padding-left:40px;">{{ main.createTime }}<span v-if="loginStatus&&userInfoCache!=null&&userInfoCache.id===main.mainUserId" @click="delComment(main.id)" style="color: var(--el-color-error); padding-left:10px; cursor: pointer;">删除</span><span @click="reComment(main)" v-if="loginStatus" style="color:gray; font-size:14px; padding-left:10px;cursor: pointer;">回复</span></div>
                            <div class="subChat" v-for="sub in main.subCommentList" :key="sub.id">
                                <span style="padding-left:20px; font-size:14px;">{{ sub.mainUsername }}</span><span>@</span><span style="font-size:14px;">{{sub.subUsername}}:</span>
                                <pre style="padding-left:20px; font-size:14px;">{{ sub.content }}</pre>
                                <div style="font-size:14px; color:gray; padding-left: 20px;">{{ sub.createTime }}<span v-if="loginStatus&&userInfoCache!=null&&userInfoCache.id===sub.mainUserId" @click="delComment(sub.id)" style="color: var(--el-color-error); padding-left:10px; cursor: pointer;">删除</span><span v-if="loginStatus" @click="reComment(sub)" style="color:gray; font-size:14px; padding-left:10px;cursor: pointer;">回复</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          </el-col>  
        </el-row>
        <el-dialog title="回复评论" v-model="showReCommentDialog">
            <el-input v-model="reTempCommentContent" type="textarea" rows="5" resize="none" :placeholder="'@'+currentReCommentData.mainUsername"></el-input>
            <div style="text-align: right;">
                <el-button @click="submitReComment" style="width: 100px; margin: 10px 0;" type="primary">发布</el-button>
            </div>
        </el-dialog>
        <el-dialog width="400" title="赞赏作者" v-model="showPay">
            <div class="payBox">
                <img style="width:100%" src="https://www.huhailong.vip/res/img/zanshang.jpg"/>
            </div>
        </el-dialog>
    </main>
</template>

<style scoped>
main{
    padding: 10px;
    min-height: calc(100vh - 110px);
    background-color: #F2F3F5;
}
.bar{
    width: 100%;
    /* padding: 10px 32px; */
    margin-bottom: 10px;
    /* box-shadow: 3px 5px 10px #aaa; */
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(255,255,255,0.9);
}
.bar > .info {
    font-weight: bold;
    display: flex;
    align-items: center;
    padding: 5px 10px;
}
.previewPage{
    background-color: #fff;
}
.card{
    padding: 10px;
    background-color: #fff;
    position: relative;
}
.mark{
    width: 50px;
    height: 15px;
    border-radius: 44px;
    background-color: var(--el-color-info);
    padding: 5px 10px;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    color: #fff;
    text-align: center;
}
.ChatTitle{
    padding: 15px 0;
    display: flex;
    align-items: center;
}
.subChat{
    padding: 10px 5px 5px 40px;
}
.commentList{
    background-color: #fff;
    padding: 10px;
}
.commentItem{
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #aaa;
}
.mainChat{
    display: flex;
    align-items: center;
}
.tips{
    text-align: center;
    padding: 20px 0;
    /* font-weight: bold; */
    font-size: 16px;
}
.chatBox:deep(.el-textarea__inner){
    border: 1px solid var(--el-color-info);
}
.zanshang{
    text-align: right;
    padding: 10px 0;
}
.payBox{
    text-align: center;
}
</style>